<template>
  <header class="account-health-header">
    <div v-if="headerLoading" class="flex first-header" style="justify-content: center;">
      <Loading size="middle" />
    </div>
    <div v-else class="flex flex-between first-header">
      <div class="flex header-left">
        <div class="flex menu-btn" @click="handleSidebar('open')">
          <i></i>
        </div>
        <div class="amz-logo"><div class="logo-img"></div></div>
        <div class="header-tips">
          <p>{{ storeName || headerInfo.store }} | <span>{{ website || headerInfo.website || 'Canada' }}</span></p>
        </div>
      </div>
      <div class="flex-1">
        <div class="flex search-box">
          <p>Search</p>
          <div class="search-icon-box">
            <svg-icon icon-class="searchIcon" class="search-icon" />
          </div>
        </div>
      </div>
      <div class="flex header-right">
        <div class="head-icon-item">
          <svg-icon icon-class="emailIcon" />
        </div>
        <div class="head-icon-item setting-item" @mouseenter="handleLoadingSetting">
          <svg-icon icon-class="settingIcon" />
          <div class="setting-box">
            <div class="setting-arrow"></div>
            <div v-if="navLoading" style="padding: 6px; background-color: #fff;">
              <Loading size="small" />
            </div>
            <template v-else>
              <ul class="setting-menu">
                <li @click="handleTo('/hz/sc/account-information')">Account Info</li>
                <li>Global Accounts</li>
                <li>Notification Preferences</li>
                <li>Login settings</li>
                <li>Return Settings</li>
                <li>Gift Options</li>
                <li>Shipping Settings</li>
                <li>Tax Settings</li>
                <li>User Permissions</li>
                <li>User Permissions History</li>
                <li>Your Info & Policies</li>
                <li>Fulfilment by Amazon</li>
                <li>Show favourites bar</li>
              </ul>
              <div class="logout">Logout</div>
            </template>
          </div>
        </div>
        <div class="flex language-box">
          <p>EN</p>
          <svg-icon icon-class="downArrowIcon" />
        </div>
        <div class="help">Help</div>
      </div>
    </div>
    <ul class="flex second-header" v-if="showNav">
      <li style="color: #0F1111; cursor: default;">Account Health</li>
      <li>Customer Service Performance</li>
      <li>Product Policy Compliance</li>
      <li>Shipping Performance</li>
      <li>Reports <i></i></li>
      <li>Voice of the Customer</li>
    </ul>

    <div class="side-nav-container" :class="{ 'show-side-nav': isShowMenu }">
      <div class="side-nav">
        <div class="side-top">
          <svg-icon icon-class="sidebarClose" @click="handleSidebar('close')" />
        </div>
        <div v-if="loading" class="loading-box">
          <Loading size="small" />
        </div>
        <ul v-else class="side-menu">
          <li v-for="(item, i) in menuTree" :key="i+'menu'">
            <p>{{ item.label }}</p>
            <svg-icon icon-class="sidebarArrow" />
            <div v-if="item.children && item.children.length > 0" class="child-menu">
              <div class="triangle-with-shadow"></div>
              <div v-for="(child, c) in item.children" :key="c+'menuchild'" class="child-item" @click="handleTo(child.path)">
                <p>{{ child.label }}</p>
                <svg-icon icon-class="sidebarChildIcon" />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="side-mark" @click="isShowMenu = false"></div>
    </div>
  </header>
</template>

<script>
import Loading from './Loading'
import { mapState } from 'vuex'
export default {
  components: { Loading },
  props: {
    showNav: {
      type: Boolean,
      defalut: false
    },
    storeName: String,
    website: String
  },
  data () {
    return {
      timer: null,
      navTimer: null,
      loading: false,
      navLoading: false,
      isShowMenu: false,
      headerLoading: false,
      headerTimer: null,
      menuTree: [
        {
          label: 'Catalog',
          children: [
            {
              label: 'Add Products',
              path: ''
            },
            {
              label: 'Add Products via Upload',
              path: ''
            },
            {
              label: 'Complete Your Drafts',
              path: ''
            },
            {
              label: 'View Selling Applications',
              path: ''
            },
            {
              label: 'Improve listing quality',
              path: ''
            },
            {
              label: 'Upload images',
              path: ''
            },
            {
              label: 'Upload and Manage Videos',
              path: ''
            },
            {
              label: 'Manage Product Documents',
              path: ''
            }
          ]
        },
        {
          label: 'Inventory',
          children: [
            {
              label: 'Manage All Inventory',
              path: '/inventory/ref=xx_invmgr_dnav_xx?tbla_myitable=sort:{"sortOrder":"DESCENDING","sortedColumnId":"date"};search:;pagination:1;'
            },
            {
              label: 'Manage Seller Fulfilled products',
              path: ''
            },
            {
              label: 'Sell Globally',
              path: ''
            },
            {
              label: 'Fulfilment by Amazon (FBA)',
              path: ''
            },
            {
              label: 'IManage FBA Inventory',
              path: ''
            },
            {
              label: 'Inventory Planning',
              path: ''
            },
            {
              label: 'Manage FBA Shipments',
              path: ''
            }
          ]
        },
        {
          label: 'Pricing',
          children: [
            {
              label: 'Pricing Health',
              path: ''
            },
            {
              label: 'Manage Pricing',
              path: ''
            },
            {
              label: 'Automate Pricing',
              path: ''
            },
            {
              label: 'Fee Discounts',
              path: ''
            }
          ]
        },
        {
          label: 'Orders',
          children: [
            {
              label: 'Manage Orders',
              path: ''
            },
            {
              label: 'Create MCF Order',
              path: ''
            },
            {
              label: 'Order Reports',
              path: ''
            },
            {
              label: 'Upload Order Related Files',
              path: ''
            },
            {
              label: 'Manage Returns',
              path: ''
            }
          ]
        },
        {
          label: 'Advertising',
          children: [
            {
              label: 'Campaign Manager',
              path: ''
            },
            {
              label: 'A+ Content Manager',
              path: ''
            },
            {
              label: 'Vine',
              path: ''
            },
            {
              label: 'Deals',
              path: ''
            },
            {
              label: 'Coupons',
              path: ''
            },
            {
              label: 'Prime Exclusive Discounts',
              path: ''
            },
            {
              label: 'Promotions',
              path: ''
            }
          ]
        },
        {
          label: 'Stores',
          children: [
            {
              label: 'Manage Stores',
              path: ''
            }
          ]
        },
        {
          label: 'Growth',
          children: [
            {
              label: 'Growth Opportunities',
              path: ''
            },
            {
              label: 'Explore Programs',
              path: ''
            },
            {
              label: 'Custom program',
              path: ''
            },
            {
              label: 'Marketplace Product Guidance',
              path: ''
            }
          ]
        },
        {
          label: 'Reports',
          children: [
            {
              label: 'Payments',
              path: ''
            },
            {
              label: 'Amazon Selling Coach',
              path: ''
            },
            {
              label: 'Business Reports',
              path: '/business-reports/ref=xx_sitemetric_dnav_xx#/dashboard'
            },
            {
              label: 'Fulfillment',
              path: ''
            },
            {
              label: 'Return Reports',
              path: ''
            },
            {
              label: 'Custom Reports',
              path: ''
            },
            {
              label: 'Inventory Reports',
              path: ''
            },
            {
              label: 'Tax Document Library',
              path: ''
            }
          ]
        },
        {
          label: 'Performance',
          children: [
            {
              label: 'Account Health',
              path: '/performance/dashboard'
            },
            {
              label: 'Feedback',
              path: ''
            },
            {
              label: 'A-to-z Guarantee Claims',
              path: ''
            },
            {
              label: 'Chargeback Claims',
              path: ''
            },
            {
              label: 'Performance Notifications',
              path: ''
            },
            {
              label: 'Voice of the Customer',
              path: ''
            }
          ]
        },
        {
          label: 'Apps and Services',
          children: [
            {
              label: 'Selling Partner Appstore',
              path: ''
            },
            {
              label: 'Manage Your Apps',
              path: ''
            },
            {
              label: 'Explore Services',
              path: ''
            },
            {
              label: 'Manage service requests',
              path: ''
            },
            {
              label: 'Develop Apps',
              path: ''
            }
          ]
        },
        {
          label: 'B2B',
          children: [
            {
              label: 'B2B Central',
              path: ''
            },
            {
              label: 'Manage quotes',
              path: ''
            },
            {
              label: 'Case Pack Recommendations',
              path: ''
            }
          ]
        },
        {
          label: 'Brands',
          children: [
            {
              label: 'Build Your Brand',
              path: ''
            }
          ]
        },
        {
          label: 'Learn',
          children: [
            {
              label: 'Seller University',
              path: ''
            },
            {
              label: 'Forums',
              path: ''
            },
            {
              label: 'News',
              path: ''
            }
          ]
        }
      ]
    }
  },
  computed: {
    ...mapState(['headerInfo'])
  },
  mounted () {
    this.headerLoading = true
    this.headerTimer = setTimeout(() => {
      this.headerLoading = false
      clearTimeout(this.headerTimer)
      this.headerTimer = null
    }, 500)
  },
  methods: {
    handleLoadingSetting () {
      this.navLoading = true
      this.navTimer = setTimeout(() => {
        this.navLoading = false
        clearTimeout(this.navTimer)
        this.navTimer = null
      }, 500)
    },
    handleSidebar (type) {
      if (type === 'open') {
        this.isShowMenu = true
        this.loading = true
        this.timer = setTimeout(() => {
          this.loading = false
          clearTimeout(this.timer)
          this.timer = null
        }, 1000)
      } else {
        this.isShowMenu = false
        this.loading = false
      }
    },
    handleTo (path) {
      if (path && (path !== this.$route.path)) {
        this.$router.push(path)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.account-health-header {
  .first-header {
    height: 48px;
    background-color: #002f36;

    .menu-btn {
      width: 48px;
      height: 48px;
      justify-content: center;
      border-left: 1px solid transparent;
      border-right: 1px solid #667575;
      cursor: pointer;

      i {
        width: 17px;
        height: 14px;
        background: url(../assets/images/amz_icons.png) no-repeat -172px -255px;
      }
      &:hover {
        border-color: #e3eced;
      }
    }
    .amz-logo {
      padding-left: 18px;
      padding: 0 20px 0 18px;
      .logo-img {
        width: 159px;
        height: 30px;
        background: url(../assets/images/logo.svg) no-repeat;
      }
    }
    .header-tips {
      padding-left: 18px;
      border-left: 1px solid #667575;

      p {
        box-sizing: border-box;
        max-width: 240px;
        height: 24px;
        padding: 1px 6px;
        font-weight: 600;
        color: #000;
        line-height: 20px;
        border: 1px solid #ccc;
        border-radius: 3px;
        background-color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span{
          font-weight: normal;
        }
      }
    }

    .search-box {
      justify-content: center;

      p {
        width: 340px;
        height: 35px;
        padding: 0 10px;
        font-size: 14px;
        font-weight: 400;
        font-style: italic;
        color: #fff;
        line-height: 35px;
        background-color: rgba(0, 130, 150, .6);
      }
      .search-icon-box {
        width: 40px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        background-color: #008296;
        cursor: pointer;

        .search-icon {
          font-size: 20px;
          color: #fff;
          margin-top: 8px;
        }
      }
    }

    .header-right {
      color: #fff;
      cursor: pointer;

      .head-icon-item {
        padding: 0 9px;
      }
      .svg-icon {
        width: 20px;
        height: 20px;
      }

      .language-box {
        padding: 0 9px;
      }

      .help {
        padding-right: 18px;
      }

      .setting-item {
        position: relative;
        padding: 9px;
        &:hover .setting-box {
          display: block;
        }
        .setting-box {
          display: none;
          position: absolute;
          transform: translate(-50%, 10px);
          margin-left: 10px;
          z-index: 100;
          font-size: 13px;
          color: #002f36;
          white-space: nowrap;
          border: 1px solid lightgrey;
        }
        .setting-menu {
          position: relative;
          z-index: 101;
          background-color: #fff;
          border: ightgrey 1px solid;
          li {
            height: 32px;
            line-height: 18px;
            padding: 7px 14px;
            cursor: pointer;
            &:hover {
              background-color: #f5f9fa;
            }
          }
        }
        .logout {
          padding: 14px;
          border-top: lightgrey 1px solid;
          cursor: pointer;
          background-color: #fff;
          &:hover {
            background-color: #f5f9fa;
          }
        }
        .setting-arrow {
          position: absolute;
          top: -5px;
          left: 50%;
          width: 8px;
          height: 8px;
          margin-left: -4px;
          &::before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 1px;
            border: 1px solid #d5dbdb;
            background-color: #fff;
            transform: rotate(45deg);
          }
        }
      }
    }
  }

  .second-header {
    padding: 7px 17px;
    // margin-bottom: 8px;
    color: #007185;
    box-shadow: 0 0 2px #ddd;
    border-bottom: 1px solid #ddd;
    background-color: rgba(243, 243, 243, .5);

    li {
      height: 20px;
      line-height: 20px;
      padding: 0 21px;
      margin-right: 10px;
      font-size: 14px;
      cursor: pointer;
      i{
        display: inline-block;
        margin: 5px 0 0 4.6px;
        vertical-align: text-top;
        width: 7px;
        height: 5px;
        background-position: -90px -5px;
        opacity: .6;
        background-image: url('../assets/images/amz_icons2.png');
        background-repeat: no-repeat;
      }
    }
  }

  .side-nav-container {
    .side-top {
      height: 48px;
      display: flex;
      align-items: center;
      color: #fff;
      background-color: #002f36;
      .svg-icon {
        margin: 0 10px;
        font-size: 20px;
        cursor: pointer;
      }
    }
    .side-nav {
      position: fixed;
      left: -242px;
      top: 0;
      width: ~"calc(min(242px, 50vw))";
      height: 100%;
      background-color: #fff;
      z-index: 2;
      transition: all .25s;
    }

    .loading-box {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .side-menu {
      padding: 10px 0;

      li {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        &:hover {
          background-color: #f5f9fa;
          .child-menu {
            visibility: inherit;
          }
          .svg-icon {
            color: #002f36;
          }
        }
        p {
          padding: 7px 14px;
          flex: 1 1 auto;
          line-height: 20px;
        }
        .svg-icon {
          margin: 0 14px 0 4px;
          font-size: 20px;
          color: #879596;
        }

        .child-menu {
          visibility: hidden;
          position: absolute;
          left: ~"calc(min(242px, 50vw))";
          top: 0;
          width: ~"calc(min(300px, 50vw))";
          max-height: 100vh;
          background-color: #fff;
          border-left: 1px solid rgba(0, 0, 0, .2);

          .triangle-with-shadow {
            position: absolute;
            left: -40px;
            top: 0;
            width: 40px;
            height: 40px;
            overflow: hidden;
            &::after {
              content: '';
              position: absolute;
              top: 7px;
              left: 34px;
              width: 15px;
              height: 15px;
              transform: rotate(45deg);
              box-shadow: -1px 5px 9px -5px rgba(0, 0, 0, .5);
              background-color: #fff;
            }
          }

          .child-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            &:hover {
              background-color: #f5f9fa;
              .svg-icon {
                display: block;
              }
            }
            p {
              margin-left: 8px;
            }
            .svg-icon {
              margin-right: 9px;
              display: none;
              font-size: 14px;
              color: #002f36;
            }
          }
        }
      }
    }

    .side-mark {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
      background-color: rgba(51, 51, 51, .8);
      z-index: 1;
      transition: all .25s;
      visibility: hidden;
    }
  }

  .show-side-nav {
    .side-nav {
      left: 0;
      transition: all .25s;
    }
    .side-mark {
      opacity: 1;
      transition: all .25s;
      visibility: inherit;
    }
  }
}
</style>
